<template>
  <div class="app-container">
    <el-card>
      <el-page-header @back="goBack">
        <template #content>
          <div
            class="flex items-center"
            style="display: flex; justify-content: space-between"
          >
            <div style="display: flex; align-items: center">
              <div>
                {{
                  route.query.readonly
                    ? "查看纸张编码"
                    : route.query.id
                    ? "编辑纸张编码"
                    : "新增纸张编码"
                }}
              </div>
              <el-tag
                v-if="route.query.code"
                :type="tagType"
                style="margin-left: 10px"
              >
                {{ route.query.code }}
              </el-tag>
            </div>
          </div>
        </template>
        <template #extra>
          <div>
            <el-button
              v-if="!readonly"
              class="button"
              type="primary"
              @click="handleSubmit"
            >
              保 存
            </el-button>
          </div>
        </template>
      </el-page-header>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-collapse v-model="activeNames">
        <el-collapse-item disabled title="基本信息" name="1">
          <template #title>
            <el-icon style="color: #4479f6">
              <Position />
            </el-icon>
            <span class="title">基本信息</span>
          </template>
          <div>
            <el-form
              :model="form"
              :rules="rules"
              :disabled="Boolean(readonly)"
              ref="paperCodingRef"
              label-width="130px"
            >
              <el-row :gutter="20">
                <!-- <el-col :span="8">
                                    <el-form-item label="自有编码" prop="originalCode">
                                        <el-input
                                            v-model="form.originalCode"
                                            placeholder="请输入自有编码"
                                            maxlength="30"
                                        />
                                    </el-form-item>
                                </el-col> -->
                <el-col :span="8">
                  <el-form-item label="纸张名称" prop="name">
                    <el-input
                      v-model="form.name"
                      disabled
                      placeholder="自动生成"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户名称">
                    <el-input
                      @click="handleSupplier"
                      readOnly
                      v-model="form.customName"
                      placeholder="请选择客户名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="类型" prop="packageType">
                    <el-select
                      v-model="form.packageType"
                      @change="changePackageType"
                      class="m-2"
                      placeholder="请选择类型"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in mes_paper_package"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="定量" prop="weight">
                    <el-input
                      v-model="form.weight"
                      @change="changeWeight"
                      type="number"
                      placeholder="请输入定量"
                      maxlength="30"
                    >
                      <template #append>克</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="16">
                                    <el-form-item label="纸张全称" prop="fullName">
                                        <el-input
                                            v-model="form.fullName"
                                            disabled
                                            placeholder="请输入纸张全称"
                                        ></el-input>
                                    </el-form-item>
                                </el-col> -->

                <el-col :span="8">
                  <el-form-item
                    label="幅宽(mm)"
                    type="number"
                    :prop="form.packageType == 2 ? 'longWide' : ''"
                  >
                    <el-input
                      @change="changeLongWide"
                      v-model="form.longWide"
                      placeholder="请输入幅宽(mm)"
                      maxlength="30"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客/厂料" prop="material">
                    <el-select
                      v-model="form.material"
                      class="m-2"
                      placeholder="请选择客/厂料"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in mes_paper_material"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item
                    label="规格型号"
                    :prop="form.packageType == 1 ? 'specs' : ''"
                  >
                    <el-select
                      v-model="form.specs"
                      @change="changeSpecs"
                      filterable
                      class="m-2"
                      placeholder="请选择规格型号"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in mes_paper_specs"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="纸型" prop="paperType">
                    <el-select
                    @change="changeLongWide"
                      v-model="form.paperType"
                      class="m-2"
                      placeholder="请选择纸型"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in mes_paper_type"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计量单位" prop="unit">
                    <el-select
                      v-model="form.unit"
                      class="m-2"
                      placeholder="请选择计量单位"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in mes_paper_unit"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="厂商地址" prop="firmAddr">
                    <el-input
                      v-model="form.firmAddr"
                      placeholder="请输入"
                      maxlength="50"
                    />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                                    <el-form-item label="库存金额">
                                        <el-input
                                            v-model="form.stockPrice"
                                            disabled
                                            placeholder="自动计算"
                                            maxlength="18"
                                        />
                                    </el-form-item>
                                </el-col> -->
                <el-col :span="8">
                  <el-form-item label="厂商" prop="firmName">
                    <el-input
                      v-model="form.firmName"
                      placeholder="请输入"
                      maxlength="18"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="厂商简称" prop="firmShort">
                    <el-input
                      @change="changeFirmShort"
                      v-model="form.firmShort"
                      placeholder="请输入"
                      maxlength="18"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="用纸类型" prop="useType">
                    <el-select
                      multiple
                      v-model="form.useType"
                      class="m-2"
                      placeholder="请选择内文/封面"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in mes_paper_usetype"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属仓库" prop="store">
                    <el-input
                      v-model="form.store"
                      disabled
                      placeholder="请输入所属仓库"
                      maxlength="18"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="纸张品牌" prop="brand">
                    <el-select
                      filterable
                      v-model="form.brand"
                      class="m-2"
                      placeholder="请选择纸张品牌"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in mes_paper_brand"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                                    
                                </el-col> -->
                <!-- <el-col :span="8">
                                    <el-form-item label="期初库存" prop="originalStock">
                                        <el-input
                                            v-model="form.originalStock"
                                            type="number"
                                            :disabled="Boolean(route.query.id)"
                                            @blur="blurOriginalStock"
                                            placeholder="请输入"
                                            maxlength="18"
                                        />
                                    </el-form-item>
                                </el-col> -->
              </el-row>

              <!-- <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="采购专员" prop="buyerName">
                                        <el-input
                                            v-model="form.buyerName"
                                            @click="handlePerson"
                                            placeholder="请输入采购专员"
                                            maxlength="30"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="实时单价" prop="realtimePrice">
                                        <el-input
                                            v-model="form.realtimePrice"
                                            type="number"
                                            placeholder="请输入实时单价"
                                            maxlength="18"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="加权单价">
                                        <el-input
                                            v-model="form.authorityPrice"
                                            type="number"
                                            @change="sumMoney"
                                            placeholder="请输入加权单价"
                                            maxlength="18"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row> -->

              <!-- <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="高度(mm)">
                                        <el-input
                                            v-model="form.height"
                                            type="number"
                                            placeholder="请输入高度(mm)"
                                            maxlength="18"
                                            step="0.01"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="安全库存">
                                        <el-input
                                            v-model="form.safetyStock"
                                            type="number"
                                            placeholder="请输入安全库存"
                                            maxlength="30"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="最低库存" prop="minStock">
                                        <el-input
                                            v-model="form.minStock"
                                            type="number"
                                            placeholder="请输入最低库存"
                                            maxlength="30"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row> -->

              <!-- <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="最高库存" prop="maxStock">
                                        <el-input
                                            v-model="form.maxStock"
                                            placeholder="请输入最高库存"
                                            maxlength="18"
                                        />
                                    </el-form-item>
                                </el-col>
                               
                                <el-col :span="8">
                                    <el-form-item label="令数">
                                        <el-input
                                            v-model="form.lingCount"
                                            placeholder="请输入"
                                            maxlength="18"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                               
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item
                                        label="吨位系数"
                                        :prop="form.packageType == 2 ? 'tonnageCoefficient' : ''"
                                    >
                                        <el-input
                                            type="number"
                                            v-model="form.tonnageCoefficient"
                                            placeholder="请输入"
                                            maxlength="18"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row> -->
              <!-- <el-form-item label="库存数量" prop="quantity">
                                        <el-input
                                            v-model="form.quantity"
                                            type="number"
                                            disabled
                                            @change="sumMoney"
                                            placeholder="请输入库存数量"
                                            maxlength="18"
                                        />
                                    </el-form-item> -->
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="每件/令数" prop="pieceOrder">
                    <el-input
                      v-model="form.pieceOrder"
                      type="number"
                      placeholder="请输入每件/令数"
                      maxlength="18"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      v-model="form.remark"
                      type="textarea"
                      placeholder="请输入内容"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
        <!-- <el-collapse-item disabled title="吨位系数" name="2">
                    <template #title>
                        <el-icon style="color: #4479f6">
                            <Position />
                        </el-icon>
                        <span class="title">吨位系数</span>
                    </template>
                    <el-button
                        size="small"
                        type="primary"
                        style="margin-bottom: 10px"
                        v-if="!readonly"
                        @click="handleAddCoefficientList"
                    >
                        新增
                    </el-button>
                    <div>
                        <el-table :data="mesPaperTonFactors" border>
                            <el-table-column label="序号" width="60" type="index" align="center" />
                            <el-table-column
                                label="车间"
                                prop="workshopName"
                                min-width="140"
                                align="center"
                            >
                                <template #default="scope">
                                    <el-select
                                        v-model="scope.row.workshopName"
                                        clearable
                                        filterable
                                        style="width: 100%"
                                        :disabled="Boolean(readonly)"
                                    >
                                        <el-option
                                            v-for="item in ems_workshop"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="版材尺寸"
                                prop="sheetSize"
                                min-width="140"
                                align="center"
                            >
                                <template #default="scope">
                                    <el-select
                                        clearable
                                        style="width: 100%"
                                        :disabled="Boolean(readonly)"
                                        v-model="scope.row.sheetSize"
                                        placeholder="请选择版材尺寸"
                                    >
                                        <el-option
                                            v-for="item in ems_machine_info_size"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="吨位系数"
                                min-width="120"
                                prop="tonFactor"
                                align="center"
                            >
                                <template #default="scope">
                                    <el-input
                                        type="number"
                                        :disabled="Boolean(readonly)"
                                        @input="limitInput('tonFactor', scope.row)"
                                        v-model="scope.row.tonFactor"
                                        placeholder="请输入吨位系数"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="备注"
                                min-width="120"
                                prop="remark"
                                align="center"
                            >
                                <template #default="scope">
                                    <el-input
                                        :disabled="Boolean(readonly)"
                                        v-model="scope.row.remark"
                                        placeholder="请输入备注"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                v-if="!readonly"
                                align="center"
                                fixed="right"
                                class-name="small-padding fixed-width"
                            >
                                <template #default="scope">
                                    <el-tooltip content="删除" placement="top">
                                        <el-button
                                            link
                                            type="primary"
                                            icon="Delete"
                                            @click="handleDelete(scope.row)"
                                        ></el-button>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item> -->
      </el-collapse>
    </el-card>
    <SearchPeople
      :visible="peopleVisible"
      @changeUpdate="changePeopleData"
      @cancel="
        () => {
          peopleVisible = false;
        }
      "
    ></SearchPeople>
    <SearchCustomer
      :visible="searchVisible"
      @changeUpdate="changeSupplierData"
      @cancel="
        () => {
          searchVisible = false;
        }
      "
    ></SearchCustomer>
  </div>
</template>
<script setup>
import SearchCustomer from "@/components/SearchCustomer";
import useTagsViewStore from "@/store/modules/tagsView";
import {
  getPaper,
  addPaper,
  updatePaper,
} from "@/api/basicInfo/paperCoding.js";
const tagsViewStore = useTagsViewStore();
const { proxy } = getCurrentInstance();
import { getMesWorkShop } from "@/api/basicInfo/workshop.js";
import SearchPeople from "@/components/SearchPeople";
const {
  mes_paper_brand,
  mes_paper_unit,
  mes_paper_material,
  mes_paper_usetype,
  mes_paper_package,
  mes_paper_type,
  mes_paper_specs,
  ems_workshop,
  ems_machine_info_size,
} = proxy.useDict(
  "mes_paper_brand",
  "mes_paper_unit",
  "mes_paper_material",
  "mes_paper_usetype",
  "mes_paper_package",
  "mes_paper_type",
  "mes_paper_specs",
  "ems_machine_info_size",
  "ems_workshop"
);
const workList = ref([]);
const router = useRouter();
const route = useRoute();
const activeNames = ["1", "2"];
const searchVisible = ref(false);
const peopleVisible = ref(false);
import { ElMessage, ElMessageBox } from "element-plus";
// import searchSupplier from '@/components/SearchSupplier'
const paperCodingRef = ref(null);
const readonly = ref(false);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  mesPaperTonFactors: [],
  rules: {
    tonnageCoefficient: [
      { required: true, message: "吨位系数不能为空", trigger: "blur" },
    ],
    // originalCode: [{ required: true, message: '自有编码不能为空', trigger: 'blur' }],
    name: [{ required: true, message: "纸张名称不能为空", trigger: "blur" }],
    specs: [{ required: true, message: "规格型号不能为空", trigger: "blur" }],
    fullName: [
      {
        required: true,
        message: "纸张全称不能为空",
        trigger: ["blur", "change"],
      },
    ],
    brand: [{ required: true, message: "纸张品牌不能为空", trigger: "blur" }],
    unit: [
      { required: true, message: "计量单位不能为空", trigger: ["change"] },
    ],
    material: [{ required: true, message: "客/厂料不能为空", trigger: "blur" }],
    packageType: [{ required: true, message: "类型不能为空", trigger: "blur" }],
    paperType: [{ required: true, message: "纸型不能为空", trigger: "blur" }],
    weight: [{ required: true, message: "定量不能为空", trigger: "blur" }],
    longWide: [
      { required: true, message: "长度/幅宽不能为空", trigger: "blur" },
    ],
    wide: [{ required: true, message: "宽度不能为空", trigger: "blur" }],
    // firmName: [{ required: true, message: '厂商不能为空', trigger: 'blur' }],
    // firmAddr: [{ required: true, message: '厂商地址不能为空', trigger: 'blur' }],
    // supplierCode: [{ required: true, message: '供应商编码不能为空', trigger: 'blur' }],
    useType: [{ required: true, message: "用纸类型不能为空", trigger: "blur" }],
    firmShort: [
      { required: true, message: "厂商简称不能为空不能为空", trigger: "blur" },
    ],
  },
});

const { form, rules, queryParams, mesPaperTonFactors } = toRefs(data);

readonly.value = route.query.readonly ? true : false;
if (route.query.id) {
  getPaper(route.query.id).then((response) => {
    mesPaperTonFactors.value = response.data.mesPaperTonFactors;
    const data = response.data || {};
    form.value = {
      ...data,
      packageType: data.packageType?.toString(),
      specs: data.specs?.toString(),
      brand: data.brand?.toString(),
      unit: data.unit?.toString(),
      material: data.material?.toString(),
      useType: data.useType?.split(","),
      paperType: data.paperType?.toString(),
      store: "纸库",
      status: data.status,
    };
  });
} else {
  form.value = {
    store: "纸库",
  };
}
const tagType = computed(() => {
  return form.value.status == 0 ? "" : "danger";
});

const specsLabel = ref(""); //规格型号
const packageTypeLabel = ref(""); //平张卷筒

//纸张全称拼接
const handleChange = (value, label, labelRef) => {
  const selectedOption = labelRef.value.find(
    (option) => option.value === value
  );
  if (selectedOption) {
    label.value = selectedOption.label;
    spliceFullname();
  }
};
const changeWeight = (value) => {
  spliceFullname();
};
const changeFirmShort = (value) => {
  spliceFullname();
};
const changeLongWide = (value) => {
  spliceFullname();
};
// const changePackageType = value => handleChange(value, packageTypeLabel, mes_paper_package)
const changePackageType = (value) => spliceFullname();
// const changeSpecs = value => handleChange(value, specsLabel, mes_paper_specs)
const changeSpecs = (value) => spliceFullname();

const changeSpecsData = (data) => {
  return mes_paper_specs.value.filter((option) => option.value === data)[0]
    .label;
};
const changePackageTypeData = (data) => {
  return mes_paper_package.value.filter((option) => option.value === data)[0]
    .label;
};
const changePaperType = (data) => {
  return mes_paper_type.value.filter((option) => option.value === data)[0]
    .label;
};

//限制只能输入2位小数
function limitInput(key, row) {
  row[key] =
    ("" + row[key]) // 第一步：转成字符串
      .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
      .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
      .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
      .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，	而且小数点后面只能有0到2位小数
}
const spliceFullname = () => {
  let resp = "";
  if (form.value.packageType) {
    if (form.value.packageType == 2) {
      resp = form.value.longWide ? form.value.longWide : "";
    } else {
      resp = form.value.specs ? changeSpecsData(form.value.specs) : "";
    }
  }
  let packageLabe = form.value.packageType
    ? changePackageTypeData(form.value.packageType)
    : "";
  
  let paperType = form.value.paperType
    ? changePaperType(form.value.paperType)
    : "";

  form.value.name = "";
  form.value.name = `${form.value.weight ? form.value.weight + "克" : ""}${
    form.value.firmShort ? form.value.firmShort : ""
  }${
    resp
    // form.value.packageType
    //     ? form.value.packageType == 2
    //         ? form.value.longWide
    //             ? form.value.longWide
    //             : ''
    //         : specsLabel.value
    //     : ''
  }${packageLabe}${paperType}`;
};
// 新增
const handleAddCoefficientList = () => {
  mesPaperTonFactors.value.push({});
};

const blurOriginalStock = (event) => {
  form.value.quantity = event.target.value;
  sumMoney();
};
const sumMoney = () => {
  form.value.stockPrice =
    form.value.quantity && form.value.authorityPrice
      ? form.value.quantity * form.value.authorityPrice
      : undefined;
};
const handlePerson = () => {
  peopleVisible.value = true;
};
const handleSupplier = () => {
  searchVisible.value = true;
};
// 车间
const getWorkshopList = async () => {
  const res = await getMesWorkShop({ pageNum: 1, pageSize: 100 });
  workList.value = res.rows;
};
// 删除
const handleDelete = (row) => {
  proxy.$modal
    .confirm("是否确认删除")
    .then(function () {
      mesPaperTonFactors.value = mesPaperTonFactors.value.filter(
        (item) => item !== row
      );
      proxy.$modal.msgSuccess("删除成功");
    })
    .then(() => {})
    .catch(() => {});
};
getWorkshopList();
// 选中的供应商
const changeSupplierData = (row) => {
  form.value.customId = row.id;
  form.value.customName = row.name;
  searchVisible.value = false;
};
const changePeopleData = (row) => {
  form.value.buyerName = row.name;
  form.value.buyerCode = row.code;
  peopleVisible.value = false;
};

//  返回
const goBack = () => {
  tagsViewStore.delView(route);
  router.go(-1);
  // router.push('/basicInfo/paperCoding')
};
const handleSubmit = () => {
  if (form.value.packageType == 2) {
    if (!form.value.longWide) {
      return ElMessage({
        message: "幅宽不能为空",
        type: "warning",
      });
    }
  }
  if (form.value.packageType == 1 && !form.value.specs) {
    return ElMessage({
      message: "规格型号不能为空",
      type: "warning",
    });
  }
  paperCodingRef.value.validate((valid) => {
    if (valid) {
      const formData = form.value;
      formData.mesPaperTonFactors = mesPaperTonFactors.value;
      if (Array.isArray(formData.useType)) {
        formData.useType = formData.useType.join(",");
      }
      if (formData.id) {
        updatePaper(formData).then((response) => {
          if (response.code === 200) {
            ElMessage({
              message: "编辑成功",
              type: "success",
            });
            goBack();
          }
        });
      } else {
        formData.status = 0;
        addPaper(formData).then((response) => {
          if (response.code === 200) {
            ElMessage({
              message: "新增成功",
              type: "success",
            });
            goBack();
          }
        });
      }
    }
  });
};
</script>

<style lang="scss" scoped></style>
